import { Todo } from "@/types";
import TodoItem from "./TodoItem";
import React from "react";
import { AnimatePresence, motion } from "framer-motion";

interface TodoListProps {
    todos: Array<Todo>;
    toggleTodo: (id: string) => void;
    deleteTodo: (id: string) => void;
}

const ulStyles = {
    display: "grid",
    placeItems: "center"
}

function TodoList({ todos, toggleTodo, deleteTodo }: TodoListProps) {
    
    return (
        <ul className="ul" style={todos.length === 0 ? ulStyles : {}}>
            <AnimatePresence mode="popLayout">
                {
                    todos.length > 0 ?
                        todos.map((todo) => (<TodoItem key={todo.id} todo={todo} toggleTodo={toggleTodo} deleteTodo={deleteTodo} ></TodoItem>)) :
                        <motion.li
                            className="li li-img"
                            initial={{ opacity: 0, filter: "blur(10px)" }}
                            animate={{ opacity: 1, filter: "blur(0)" }}
                            exit={{ opacity: 0, filter: "blur(10px)" }}
                        >
                            <img src="../assets/empty.svg" width={200} height={200} style={{ margin: "auto" }} alt="" />
                        </motion.li>
                }
            </AnimatePresence>
        </ul>
    )
}

export default TodoList;